import React, {Component} from 'react';
import PropTypes from 'prop-types'
//import { Redirect } from 'react-router';
import { withRouter } from "react-router-dom";
import {InputItem, Button, WingBlank, NavBar, Icon,Modal} from 'antd-mobile';
class RegisterContent extends Component {
    state = {  
       usernameFail : false,
       passwordFail: false,
       confirmPwFail: false,
       telFail: false,
       codeFail:false,
       codeButtonDisabled:false
    }
    static propTypes = {
        registerSuccess:PropTypes.func.isRequired,
        registerAccount:PropTypes.func.isRequired,
        registerData:PropTypes.object.isRequired
    }

    OnGetCodeClick() {
        console.log(this.codeButtonRef);
        this.setState({codeButtonDisabled:true});
        console.log("GetCodeClick!");
    }

    OnRegisterClick() {
        const {registerAccount} = this.props
        let account = this.username.state.value
        let password = this.password.state.value
        
        console.log("OnRegisterClick! Ready to router!");
        let url = "http://192.168.43.187:8080/lwj/basic/register?account="+account+"&password="+password
        registerAccount(url)
    }
    OnQuitClick() {
        this.props.history.push("/");
    }


    CheckCorrect(type) {
        console.log("OnRegisterClick!");
        switch(type) {
            case 0:
              if(false) this.setState({usernameFail:true});
              else this.setState({usernameFail:false});
              break;
            case 1:
            if(this.password.state.value.length>16) this.setState({passwordFail:true});
            else this.setState({passwordFail:false});
              console.log(this.password.state.value.length);
              break;
            case 2:
            if(this.password.state.value !== this.confirmPw.state.value) this.setState({confirmPwFail:true});
            else this.setState({confirmPwFail:false});
              break;
            case 3:
            if(this.tel.state.value.length !== 11) this.setState({telFail:true});
            else this.setState({telFail:false});
              break;
            case 4:
            if(true) this.setState({codeFail:true});
            else this.setState({codeFail:false});
              break;
            default:
              break;
        }
    }
    alert = Modal.alert;
    
    successAlert = () => {
        const alertInstance = this.alert('成功', '注册成功', [
       { text: 'OK', onPress: () => this.props.history.push("/") , style: 'default' },
    ]);}

    failAlert = () => {
        const alertInstance = this.alert('失败', '用户名已存在', [
       { text: 'OK', onPress: () => console.log('OK'), style: 'default' },
    ]);}

    render(){
       const {registerSuccess, registerData} = this.props
       //console.log(login)
       if(registerData.RegsisterState == 1)
            this.successAlert();
        else if(registerData.RegsisterState == 2)
            this.failAlert();
        return(
           <div><div>
               <NavBar  style = {{position:"float"}}
               mode="primary"
                    icon={<Icon type="left" onClick = {()=>this.OnQuitClick()}/>}
              >只需十秒，加入流伪捷！</NavBar>
              </div>
               <WingBlank size="lg" style = {{margin: 20}}>
                <InputItem  placeholder = "用户名" name = "username" ref = {input => this.username = input} onBlur = {()=>this.CheckCorrect(0)}>
                用户名
                </InputItem>
                {(this.state.usernameFail?<p style = {{fontSize:"10px",color: 'red'}}>用户名不合规范！</p>:<br/>)}
                <br/>
                <InputItem  type = "password" placeholder = "密码" name = "password" ref = {input => this.password = input } onBlur = {()=>this.CheckCorrect(1)}>
                密码
                </InputItem>
                {(this.state.passwordFail?<p style = {{fontSize:"10px",color: 'red'}}>密码不合规范！</p>:<br/>)}
                <br/>
                <InputItem  type = "password" placeholder = "确认密码" name = "confirmPassword" ref = {input => this.confirmPw = input} onBlur = {()=>this.CheckCorrect(2)}>
                确认密码
                </InputItem>
                {(this.state.confirmPwFail?<p style = {{fontSize:"10px",color: 'red'}}>请保证密码输入一致！</p>:<br/>)}
                <br/>
                <InputItem  placeholder = "手机号" name = "tel" ref = {input => this.tel = input} onBlur = {()=>this.CheckCorrect(3)}>
                手机号
                </InputItem>
                {(this.state.telFail?<p style = {{fontSize:"10px",color: 'red'}}>请输入正确的手机号！</p>:<br/>)}
                <br/>
                <span>
                <InputItem  type = "text" extra= {
                (this.state.codeButtonDisabled?<Button disabled style = {{position:"relative",zIndex:1000}} size = "small" type = "ghost" ref = {codeButton => this.codeButtonRef = codeButton}> 已发送 </Button>:<Button style = {{position:"relative",zIndex:1000}} size = "small" type = "ghost" ref = {codeButton => this.codeButtonRef = codeButton} onClick = {()=>this.OnGetCodeClick()}> 获取验证码 </Button>)} placeholder = "验证码" name = "code" ref = {input => this.code = input} onBlur = {()=>this.CheckCorrect(4)}>
                手机验证码
                </InputItem>
                </span>
                {(this.state.codeFail?<p style = {{fontSize:"10px",color: 'red'}}>请输入正确的验证码！</p>:<br/>)}
                <br/>
                <Button  type = "primary" onClick = {()=>this.OnRegisterClick()}>注册</Button>
               </WingBlank>
            </div>
        )
    }
}

export default withRouter(RegisterContent)